<html class="hola-html-reset hola-var">
  <head>
      <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>HolaKit</title>
    <link rel="stylesheet" href="dist/holakit.css">
    <link rel="stylesheet" href="assets/demo/holakitdemo.css">
  </head>
  <body class="hola-body-typography hola-grey-bg">
    <header class="hola-navbar hola-navbar-transparent hola-navbar-darkbg">
      <div class="hola-container">
        <nav class="hola-navbar-main">
          <a href="#" class="hola-navbar-brand">HolaKit</a>
        </nav>
        <input type="checkbox" class="hola-navbar-toggle" id="navbar-toggle">
        <label for="navbar-toggle" class="hola-navbar-toggle-label"></label>
        <nav class="hola-navbar-sub">
          <a href="https://ihola.one">¡Hola! 官网</a>
          <a href="https://design.ihola.one">¡Hola! Design</a>
        </nav>
      </div>
    </header>
    <div class="hola-hero hola-hero-dark-bg hola-hero-height-extended">
      <div class="hola-container hola-hero-content">
        <h1>HolaKit</h1>
        <p>又一个设计驱动的 UI 组件库。</p>
        <a href="styleguide/" class="hola-button hola-button-ghost">查看文档</a>
      </div>
    </div>
    <div class="hola-container">
      <h3 class="hola-card-stack-title hola-card-stack-title-light">UI 组件</h3>
      <div class="hola-columns hola-card-stack">
        <div class="hola-columns-item">
          <div class="hola-card">
            <h2 class="hola-card-title">按钮 Buttons</h2>
            <p>
              <input type="submit" class="hola-button hola-button-normal" value="表单提交">
              <button class="hola-button hola-button-normal">&lt;button&gt; 组件</button>
              <a href="#" class="hola-button hola-button-normal">链接按钮</a>
            </p>
            <p>
              <a href="#" class="hola-button hola-button-primary">Primary Button</a>
              <a href="#" class="hola-button hola-button-ghost">Ghost Button</a>
            </p>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card">
            <h2 class="hola-card-title">纵向菜单 V-Menus</h2>
            <ul class="hola-vmenu">
              <li class="hola-vmenu-item"><a href="#">苟利国家生死以，岂因祸福避趋之。敢同恶鬼争高下，不向霸王让寸分。</a></li>
              <li class="hola-vmenu-item"><a href="#">毛泽东思想</a></li>
              <li class="hola-vmenu-item"><a href="#">邓小平理论<span class="hola-badge">微小的贡献</span></a></li>
              <li class="hola-vmenu-item"><a class="hola-vmenu-item-active" href="#">三个代表重要思想<span class="hola-badge">重要</span><span class="hola-badge hola-badge-radii">64</span></a></li>
              <li class="hola-vmenu-item"><a href="#">科学发展观</a></li>
            </ul>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card hola-card-with-image">
            <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
            <h2 class="hola-card-title">头图卡片 Card with image</h2>
            <p>Nulla neque ducimus, natus a voluptatibus quae minima cumque tenetur iusto modi. Harum repellendus fugit laboriosam quia beatae tempore voluptates?</p>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card hkdemo-avatar-spacing">
            <h2 class="hola-card-title">头像 Avatar</h2>
            <img src="https://laosb.github.io/assets/img/avatar.png" alt="Round" class="hola-image hola-image-round hola-avatar hola-avatar-medium">
            <img src="https://laosb.github.io/assets/img/avatar.png" alt="Radii" class="hola-image hola-image-radii hola-avatar hola-avatar-medium">
            <img src="https://laosb.github.io/assets/img/avatar.png" alt="Round" class="hola-image hola-image-round hola-avatar hola-avatar-medium hola-avatar-highlighted">
            <img src="https://laosb.github.io/assets/img/avatar.png" alt="Radii" class="hola-image hola-image-radii hola-avatar hola-avatar-medium hola-avatar-highlighted">
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card">
            <h2 class="hola-card-title">表单 Form</h2>
            <form action="">
              <p>
                <input class="hola-form-ctrl hola-input-singleline" type="text" placeholder="输入一些文字">
              </p>
              <p>
                <textarea class="hola-form-ctrl hola-input-multiline" placeholder="输入一大坨文字"></textarea>
              </p>
              <p>
                <input type="submit" class="hola-button hola-button-primary" value="提交">
              </p>
            </form>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card">
            <h2 class="hola-card-title">标签 Badge<span class="hola-badge">0.12.0</span></h2>
            <p>这是一个长长长长的长标题<span class="hola-badge">并没有分类</span><span class="hola-badge hola-badge-radii">233</span></p>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card hola-card-full-image">
            <img src="https://source.unsplash.com/featured/?sky" alt="Photo from Unsplash" class="hola-image">
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card hola-card-list">
            <div class="hola-card-list-item">
              <h3 class="hola-card-list-item-title-title">Card List Item 1</h3>
              <p>Posted at Aug 17th.</p>
            </div>
            <div class="hola-card-list-item">
              <h3 class="hola-card-list-item-title-title">Card List Item 2</h3>
              <p>Posted at Dec 25th.</p>
            </div>
            <div class="hola-card-list-item">
              <h3 class="hola-card-list-item-title-title">Card List Item 1</h3>
              <p>Posted at Jun 4th.</p>
            </div>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card">
            <h2 class="hola-card-title">信息表 Info Sheet<span class="hola-badge">0.22.0</span></h2>
            <div class="hola-infosheet">
              <div class="hola-infosheet-row">
                <span class="hola-infosheet-key">用户名</span>
                <p class="hola-infosheet-value">laosb</p>
              </div>
              <div class="hola-infosheet-row">
                <span class="hola-infosheet-key">手机号码</span>
                <p class="hola-infosheet-value">+1 (555) 555 5555</p>
              </div>
              <div class="hola-infosheet-row">
                <span class="hola-infosheet-key">备注</span>
                <p class="hola-infosheet-value">并不住在美国，但是用着一个美国手机号。他是 Holakit 的最初作者及维护者，常常诈尸。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="hola-columns-item">
          <div class="hola-card">
            <h2 class="hola-card-title">Aut, atque porro?</h2>
            <p>Corrupti odit adipisci molestiae expedita quasi necessitatibus. Ipsam aliquam cumque temporibus incidunt quidem possimus, voluptas, alias nam molestias labore pariatur!</p>
          </div>
        </div>
      </div>
    </div>
    <h3 class="hola-container hola-card-stack-title">横滚布局</h3>
    <div class="hola-layout-container hola-layout-scrollable-hori">
      <div class="hola-container">
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
        <div class="hola-card hola-card-with-image hola-card-tiny">
          <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
          <h4 class="hola-card-title">小卡片</h4>
        </div>
      </div>
    </div>
    <h3 class="hola-container hola-card-stack-title">大小栏布局</h3>
    <div class="hola-container hola-layout-container hola-layout-container-sidebar-right">
      <div class="hola-layout-main hola-card-stack">
        <div class="hola-card">
          <h2 class="hola-card-title">表格 Table</h2>
          <div class="hola-table-container">
            <table class="hola-table hola-table-fullwidth">
              <thead>
                <tr>
                  <th>Lorem.</th>
                  <th>Reiciendis.</th>
                  <th>Ducimus?</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</td>
                  <td>Ab voluptates dolorum adipisci ut impedit aperiam velit!</td>
                  <td>Eum iusto ad dolores sit obcaecati ipsa sint?</td>
                </tr>
                <tr>
                  <td>23333</td>
                  <td>23333</td>
                  <td>23333</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="hola-card">
          <h2 class="hola-card-title">文字设计 Typography</h2>
          <div class="hola-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi libero debitis consequatur error quae id ipsa, earum velit vel. Hic?</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima sed assumenda cupiditate, laudantium facere magni?</p>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, nam. Excepturi, eaque necessitatibus, quasi, cupiditate eveniet explicabo ducimus dolorum distinctio voluptas non et. Libero ratione quibusdam, beatae rerum aliquid officia.</p>
            <img src="https://source.unsplash.com/featured/?step" alt="Pic">
            <h3>兰亭集序</h3>
            <p>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，脩稧（禊）事也。群贤毕至，少长咸集。此地有崇山峻领（岭），茂林脩竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。</p>
            <p>是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛。所以游目骋怀，足以极视听之娱，信可乐也。</p>
            <p>夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣（取/趋）舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀；况脩短随化，终期于尽。古人云：“死生亦大矣。”岂不痛哉！</p>
            <p>每揽（览）昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦由（犹）今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之揽（览）者，亦将有感于斯文。</p>
            <h3>代码测试</h3>
            <pre><code>.hola-image, .hola-content img {
  display: block;
  width: 100%;
  margin: var(--hola-element-gap) 0;
}

.hola-image-round {
  border-radius: 50%;
}
.hola-image-radii {
  border-radius: 5px;
}
</code></pre>
          </div>
        </div>
      </div>
      <div class="hola-layout-sidebar">
        <div class="hola-card">
          Lorem ipsum dolor sit.
        </div>
      </div>
    </div>
    <footer class="hola-footer">
      <div class="hola-container">
        <p>Copyright 2018 Team ¡Hola!.</p>
        <p>This project is hosted on <a href="https://github.com/teamhola/holakit">GitHub</a>.</p>
      </div>
    </footer>
  </body>
</html>
